<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>
<script type="text/javascript">
$(document).ready(function(){
	
	
	$( "#dialog" ).dialog({
	      autoOpen: false,
	      modal: true,
	      buttons:{"OK":function(){
	    	  $(this).dialog('close');
	      }},
	      show: {effect: 'fade', duration: 1000},
	      hide: {effect: 'fade', duration: 1035},
// 	      show: {
// 	        effect: "blind",
// 	        duration: 980
// 	      },
// 	      hide: {
// 	        effect: "explode",
// 	        duration: 980
// 	      }
	    });
	 /*
	    $( "#opener" ).click(function() {
	      $( "#dialog" ).dialog( "open" );
	    });
	
	*/
	
	
	
	
	
	$("#dialogo").dialog({
		autoOpen: false,
                    title: "Formulario Tipo de Composicion",
		height: 250,
		width: 550,
		modal: true,
		buttons: {
                        "Aceptar": function() {
                            var flag = $("#formTipoDeComposicion").valid();
                            if(flag){
                                $.ajax({
                                    type: 'POST',
                                    url: 'generalAdministrationAddEditCity',
                                    data: $('#formTipoDeComposicion').serialize(),
                                    success: function(res){
                                       // $('#listCiudades').html(res);
                                    	mostrarLista(res);
                                    },
                                    error:function(){alert("Error! al registrar el Tipo de Composicion")}
                                });
                                $( this ).dialog( "close" );
                            }
                        },
                        Cancelar: function() {
                            $( this ).dialog( "close" );
                        }
		},
		close: function() {
                        // implementar lo que convenga
		}
	});
	
	
	
	
	
	//DataTables
	$('#tabla').dataTable({
		"oLanguage": {
            "sUrl": "../resources/media/es.txt"
        } ,
        "bSort": false,
        "sPaginationType": "full_numbers"
	});
	
	
	
	
	
	
	
	// boton add
    $.fn.addCiudad = function(){
         // primero reseteamos :)
         $('#formCiudad').each(function(){
             this.reset();
         });
         
         $("#idPaisSel option:selected").each(function (){
             $("#idPais").val($(this).val());
             $("#nombrePais").val($(this).text());
         });
         
         $("#titleForm").text("Nueva Ciudad");
         $("#accion").val("0");
         $("#dialog:ui-dialog" ).dialog( "destroy" );
         $("#dialogo" ).dialog( "open" );
         $("#nombre").focus();
    }
    
    // funcion que modifica
     $.fn.editar = function(idCiudad,nombre,sigla){
         $("#titleForm").text("Modificar Ciudad");
         $('#formCiudad').each(function(){
             this.reset();
         });
         $("#idPaisSel option:selected").each(function (){
             $("#idPais").val($(this).val());
             $("#nombrePais").val($(this).text());
         });
         
         $("#accion").val("1");
         $("#idCiudad").val(idCiudad);
         $("#nombre").val(nombre);
         $("#sigla").val(sigla);
         $("#dialog:ui-dialog" ).dialog( "destroy" );
         $("#dialogo").dialog("open");
         $("#nombre").focus();
     }
    
     
	
	
	
     
  // funcion que elimina un tipo de composicion
     $.fn.eliminarActiveSubstance = function(activeSubstanceId,name){     
         
         if(confirm("¿Esta seguro de eliminar el Principio Activo ''"+name+"''?")){
             $.ajax({
                 url: "removeActiveSubstance",
                 type: "GET",
                 data:{activeSubstanceId:activeSubstanceId, name:name},
                
                 success:function(res){
                	 alert(res);
                	 location.href = "configActiveSubstance?_menuId=1&_subMenuId=1&_optionId=1";
                 },
                 error: function(res){ alert("Error! al eliminar el principio activo."); }
             });
         }
     }
	
     
     
	
     $("#dialogShowDetailActiveSubstance").dialog({autoOpen: false, height: 350, width: 550, modal: true,
			open: function(event, ui){		
				//$("#divDetailActiveSubstance").print();
			},
			buttons: {
	            "Aceptar": function() {
	            		//location.href = "configActiveSubstance?_menuId="+"<c:out value="${param._menuId}"/>"+"&_subMenuId="+"<c:out value="${param._subMenuId}"/>"+"&_optionId="+"<c:out value="${param._optionId}"/>"; 
	                	$( this ).dialog( "close" );
	            },
	            Cancelar: function() { $( this ).dialog( "close" );}
			},
			close: function(){ $( this ).dialog( "close" ); }
		});		
		
	
});

	function detailSubstance(activeSubstanceId){
		$("#dialogShowDetailActiveSubstance").load("activeSubstanceShowDetail?_activeSubstanceId="+activeSubstanceId,function(){
			openDialogModalForm("#dialogShowDetailActiveSubstance","Detalle",null);
		});
	}

	function newSubstance(){
	    location.href = "newActiveSubstance?_menuId=1&_subMenuId=1&_optionId=1";
	}
	
	function editSubstance(activeSubstanceId){
    	location.href = "activeSubstanceEdit?_menuId=1&_subMenuId=1&_optionId=1&_activeSubstanceId="+activeSubstanceId;
    	//location.href = "adminClassRoomEdit?_menuId=1&_subMenuId=1&_optionId=1&idClassRoom="+idClassRoom;
    }
	
	 
</script>
</head>

<body>
	  <div id="top-wrap">
            <!-- cabeza principal -->
            <%@include file="../../../head.jsp" %>
            
            <!-- cuerpo -->
            <div id="bodySpace">               
                <!-- aqui va la ruta -->
                <div class="clearfix" id="middle" style="position: absolute">
                    <!-- aqui va el arbol de entrada -->
                    <div id="breadcrumb"><!-- le da la forma de la imagen -->
                        <ul>
                        <li><a href="mainFront?v=1">Home</a></li>
                        <li><span style="color:#666">Configuraci&oacute;n</span></li>
                        <li><span style="color:#666">Productos/Principio Activo</span></li>
                        <li class="current-page"><span class="end"><span class="middle">Principio Activo</span></span></li>
                        </ul>
                        <!-- para la hora -->
                        <!--<div style="clear: both;position: absolute;text-align: right;width: 100%;"><span id="fechaServ"></span>&nbsp;&nbsp;<span id="horaServ" style=""></span>&nbsp;</div>-->
                    </div><!-- begin SIDEBAR FIRST -->
                </div>
                
                <div id="principal">
                    <!-- izquierda -->
                    <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                        <div class="izq">
                            <%@include file="../../../bodyIzq.jsp"%>
                        </div>
                        	<c:if test="${l == 0}">
								<script>  
									alert('Redireccionando a Administracion de Pais');  
					            	location.href = "adminCountry?v=1&idMenu=1&idSubMenu=2&idOpcion=3";
								</script>
							</c:if>
                        <div class="medio" style="border: 0px solid"><br/>                     
                            <center>
                            <div id="listCiudades">
                            <h2 class="decorado">Lista de Principios Activos </h2>
                            <table class="miReporte" style="width: 100%">
                                <tr>
								<td style="text-align: right"><input type="button" class="boton" value="Anadir Nuevo" onclick="newSubstance()" title='Pulsa aqui para nuevo Usuario'/></td>
							</tr>
                            </table>
                            <table id="tabla" class="tabla_decorado" style="width: 100%" >
                                <thead>
                                    <tr><!--  -->
                                        <th width="5%" class="th_decoradoRowspan">Nº</th>
                                        <th width="15%" class="th_decoradoRowspan">NOMBRE</th>
                                        <th width="15%" class="th_decoradoRowspan">SINONIMOS</th>
                                        <th width="20%" class="th_decoradoRowspan">ACCION TERAPEUTICA</th>     
                                        <th width="20%" class="th_decoradoRowspan">PROPIEDADES</th>                                    
                                        <th width="25%" class="th_decoradoRowspan">ACCIONES</th>
                                    </tr>
                                </thead>
                                <tbody>
                            		<c:set var="i" value="1"/>
									<c:forEach var="item" items="${substance}"> 
	                                    <tr class="tr_decorado">
	                                        <td class="th_decorado" style="text-align: center">${i}</td>
	                                        <td class="th_decorado">${item.name} </td>
	                                        <td class="th_decorado">${item.synonyms}</td>
	                                        <td class="th_decorado">${item.therapeuticAction} </td>
	                                        <td class="th_decorado">${item.properties} </td>
	                                        <td class="td_decoradoDerecha" style="text-align: center">
	                                        	<input type="button" value="Detalle" onclick="detailSubstance(${item.activeSubstanceId})" class="botonRep" title="Pulsa aqui para ver el detalle"/>
	                                            <input type="button" value="Editar" onclick="editSubstance(${item.activeSubstanceId})" class="botonRep" title="Pulsa aqui para editar"/>             
	                                            <input type="button" value="Eliminar" onclick="$.fn.eliminarActiveSubstance(${item.activeSubstanceId}, '${item.name }')"  class="botonRep" title="Pulsa aqui para eliminar"/>
	                                        </td>
	                                    </tr>                           				
	                                    <c:set var="i" value="${i+1}"/>
					        		</c:forEach>
                                </tbody>
                            </table>
                           
                            </div> <!-- End pais id='paisBaja' -->
                            
                            </div> <!-- End id="listPais" -->
                                
                            <div id="dialogo"><br/>
                                <h2 class="decorado" id="titleForm"></h2><br/>
                                <form id="formTipoDeComposicion" method="POST">
                                    <input type="hidden" name="accion" id="accion" value="0" />
                                    <input type="hidden" name="idPais" id="idPais" value="0" />
                                    <input type="hidden" name="idCiudad" id="idCiudad" value="0" />
                                    
                                    <div style="clear:both;">
                                        <label class="form_align35" >Nombre : </label>
                                        <input type="text" name="nombre" id="nombre" value="" class="required form_input_align" title="Ingrese " maxlength="40"/>
                                        <label class="error">*</label>
                                    </div>
                                    
                                </form>
                            </div> <!-- FIN DIV id="dialogo" -->  
                            </center>
                            
                            
                            <div id="dialog" title="Detalle">
							  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
							</div>
                            
                            <div id="dialogShowDetailActiveSubstance"></div>		
                            
                            
                            
                        </div>
                    </div><!--end of leftPan-->
                    
                    <div class="yDer" style="border: 1px solid #ccc;">
                        <%@include file="../../../notices.jsp" %>                       
                    </div><!--end of rightPan-->
                </div><!--end of content-wrapper-->
            </div><!--end of body-wrap-->
        </div>
</body>
</html>
